<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .w1200 {
      width: 1200px;
      margin: 0 auto;
    }

    body {

      margin: 0 auto;
      background-color: #eee;
    }

    header {
      height: 180px;
      background-color: #f40;
    }

    main {
      height: auto;
      background-color: aqua;
    }

    footer {
      height: 200px;
      background-color: aquamarine;
    }

    aside {
      position: fixed;
      bottom: 10%;
      right: 10%;
      background-color: red;
    }

    article {
      height: 650px;
      background-color: pink;
    }

    article .cate {
      width: 100%;
      height: 100px;
      background-color: #f21;
    }

    article .cate div[class^='box'] {
      width: 60%;
      float: left;
      height: 100px;
      background-color: aqua;
    }

    article .cate div:first-child,
    article .cate div:last-child {
      width: 20%;
      background-color: bisque;
    }
  </style>
</head>

<body>
  <header>
    <div class="banner">i am 首页海报</div>
    <nav>i am 头部导航</nav>
  </header>
  <main class="w1200">
    <article>
      <div class="cate">
        <div class="box1">2</div>
        <div class="box2">6</div>
        <div class="box3">2</div>
      </div>
      <div class="video-list1"> first video list </div>
      <div class="video-list2"> secend video list </div>
    </article>
    <aside>
      <div class="tips1">component1</div>
      <div class="tips2">component2</div>
      <div class="tips3">component3</div>
    </aside>
  </main>
  <footer class="w1200">底部信息</footer>
</body>

</html>